<template>
	<view class="content">
		<!-- 导航 -->
		<view class="nav_wrap  pd ">
			<view class="new-head" :style="{'margin-top':StatusBarHeight+10+'px'}">
				<image src="@/static/order/return.png" mode="aspectFill" @click="back"
					style="width: 64rpx;height: 64rpx;">
				</image>
				<view class="nav-title">
					帖子详情
				</view>
				<view class="nav_share" @click="openOperate">
					<image src="../../static/square/menu.png" mode="widthFix" class="HR_menu"></image>
				</view>
			</view>
		</view>
		<!-- <u-skeleton rows="3" title avatar animate loading></u-skeleton> -->
		<view class="userInfo" :style="{'margin-top':StatusBarHeight+75+'px'}">
			<view class="topBox">
				<view class="leftBox">

					<view class="avatar" @click="goHomePage(userInfo.customerId)">
						<image :src="userInfo.userAvatar" mode="">
						</image>
					</view>
					<view class="userName">
						{{userInfo.userName}}
					</view>
				</view>
				<view class="rightBox">
					<!-- 节流  @tap="$u.throttle(btnAClick, 500)-->
					<view v-if="!isMySelf&&!loadingDisa&&userInfo.isLogoff!=1" :class="['follow',userInfo.isFavor==1?'following':'']"
						@click.stop="changeFollowStatus">
						{{userInfo.isFavor==1?'已关注':'关注'}}
					</view>
					<!-- 禁用按钮，防抖，备用方案待删除，选用u-input替换 -->
					<view v-if="!isMySelf&&loadingDisa&&userInfo.isLogoff!=1" :class="['follow',userInfo.isFavor==1?'following':'']">
						{{userInfo.isFavor==1?'已关注':'关注'}}
					</view>
				</view>
			</view>
			<view class="contentTxt">
				{{userInfo.text}}
			</view>
			<view class="video_wrap" v-if="userInfo.video">

				<ls-dom-video ref="domVideo" class="video-item" object-fit="contain" :controls="true"
					:show-progress="false" :show-fullscreen-btn="false" :show-play-btn="false"
					:show-bottom-progress="false" :autoplay="false" :src="userInfo.video"></ls-dom-video>
			</view>
			<view class="imgs" v-if="userInfo.photoList&&userInfo.photoList.length>0">
				<view class="imgsItem" v-for="(item1,index1) in userInfo.photoList" :key="index1"
					@click="onShowImg(userInfo.photoList,index1)">
					<image :src="item1" mode="widthFix"></image>
				</view>
			</view>
			<view class="footBox">
				<view class="dateTime">
					发布于 {{userInfo.createTime}}
				</view>
				<view class="rightBox">
					<view class="favorite">
						<image :src="`../../static/postDetail/${userInfo.isUses==1?'favorited':'favorite'}.png`" mode=""
							@click="onLikeOrDisLike('帖子',userInfo.isUses)">
						</image>
						{{userInfo.favoriteNum}}
					</view>
					<view class="comment">
						<image src="../../static/postDetail/comm.png" mode=""></image>
						<!-- {{userInfo.commentNum}} -->
						{{(commList&&commList.length>=0)?commList.length:0}}
					</view>
				</view>
			</view>
		</view>
		<view class="commBox" id="commBox">
			<view class="head">
				<view class="allComm">
					全部评论
				</view>
				<view class="switch">
					<u-subsection :list="switchlist" :current="curNow" activeColor="#333333" inactiveColor="#ADADAD"
						bgColor="#F7F7F7" @change="sectionChange"></u-subsection>
				</view>
			</view>
			<view class="commList" v-if="commList && commList.length>0">
				<view class="commItem" v-for="(item,index) in commList">
					<view class="left" @click="goHomePage(item.customerId)">
						<image :src="item.userAvatar" mode=""></image>
					</view>
					<view class="right" @longpress="onLongpress(item)">
						<view class="title">
							<view class="name">
								{{item.userName}}
							</view>
							<view class="favor">
								<image :src="`../../static/postDetail/${item.masterUse==1?'favorited':'favorite'}.png`"
									mode="" @click.stop="onLikeOrDisLike('评论',item.masterUse,item.id)"></image>
								<view class="num">
									{{item.favoriteNum}}
								</view>
							</view>
						</view>
						<view class="contentTxt">
							{{item.commentDescription}}
						</view>
						<view class="time">
							{{item.publishDate}}
						</view>
					</view>
				</view>
			</view>
			<view class="nullData" v-else>
				<image src="../../static/postDetail/message.png" mode="widthFix"></image>
				<view class="txt">
					沙发等你来抢~
				</view>
			</view>
		</view>
		<u-overlay :show="folModalShow" @click="folModalShow = false">
			<view class="warp-lay">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确定不再关注Ta了吗
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="folModalShow = false">
							继续关注
						</view>
						<view class="btn confirm" @click="onCancelFollow">
							不关注
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp-lay">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确认删除{{isPostOrComm?'帖子':'评论'}}吗?
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							取消
						</view>
						<view class="btn confirm" @click="isPostOrComm?deletePost():deleteComm()">
							确认
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff">
			<view class="delete" v-show="isPostOrComm &&isMySelf" @click="openOverlay">
				删除
			</view>
			<view class="delete" v-show="isPostOrComm &&!isMySelf" @click="onReport">
				举报
			</view>
			<view class="delete" v-show="!isPostOrComm &&isMySelf" @click="openOverlay">
				删除
			</view>
			<view class="delete" v-show="!isPostOrComm &&!isMySelf" @click="onReport">
				举报
			</view>
			<view class="cancel" @click="closeModal">
				取消
			</view>
		</uni-popup>
		<view class="speak">
			<u--input placeholder="友善评论，文明发言" border="none" v-model="commentContent" @confirm="onCommit"
				confirm-type="send" :maxlength="300" clearable></u--input>
		</view>
		<!-- <imageViewer ref="imageViewerRef" :types="viewType" :urls="viewImg" :show.sync="viewShow"></imageViewer> -->
	</view>
</template>

<script>
	// import imageViewer from '@/components/imagesViewer/imagesViewer.vue'
	import {
		getStatusBarHeight,
	} from "@/utils/system.js"
	import {
		getPostDetail,
		delPost,
		delComm
	} from "@/api/post.js";
	import {
		threadsById,
		addComment,
		addLike,
	} from "@/api/apis.js"
	import {
		addCustomerFans,
		deleteFavorite
	} from "@/api/follow.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			// imageViewer,
		},
		data() {
			return {
				StatusBarHeight: 0, //导航栏高度
				detailId: '',
				userInfo: {},
				commList: [],
				switchlist: [{
						name: '推荐'
					},
					{
						name: '最新'
					}
				],
				curNow: 0,
				// viewImg: '',
				// viewShow: false,
				// viewType: '',
				commentContent: "",
				isMySelf: true,
				operateCommId: '',
				isPostOrComm: false,
				modalShow: false,
				nowFollowId: '',
				folModalShow: false,
				isRemark: "no",
				loadingDisa: false
			};
		},
		onLoad(options) {
			this.detailId = options.id;
			console.log(this.detailId, 'this.detailId ')
			this.StatusBarHeight = getStatusBarHeight()
			console.log(options, "options")
			if (options.isRemark) {
				this.isRemark = options.isRemark

			}

		},
		async mounted() {
			await this.getDetail()
			await this.isScroll()
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},
		methods: {
			// 节流
			btnBClick(id) {
				// 此处用法为在js中调用，需要写uni.$u.debounce()
				uni.$u.debounce(this.addFollow(id), 500)
			},
			goHomePage(id) {
				uni.navigateTo({
					url: `/pages/homepage/homepage?customerId=${id}`
				})
			},
			isScroll() {
				if (this.isRemark == "yes") {
					console.log("markTrue")
					this.scrollComm()
				}
			},
			scrollComm() {
				let that = this
				const query = uni.createSelectorQuery().in(this);

				query.select(`#commBox`).boundingClientRect(data => {
					if (data) {
						// data.top就是元素距离顶部的高度
						console.log('元素距离顶部的高度:', data.top);
						// that.realTop = data.top
						setTimeout(() => {
							uni.pageScrollTo({
								scrollTop: data.top + 300, //滚动的距离
								duration: 200, //过渡时间
							})

						}, 100)
					}
				}).exec();

			},
			onCancelFollow() {
				this.loadingDisa = true
				console.log(this.nowFollowId, 'this.nowFollowId')
				// return
				deleteFavorite({
					followerId: this.nowFollowId
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						this.loadingDisa = false
						this.getDetail()
						this.folModalShow = false
						uni.showToast({
							title: '取消关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '取消关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			addFollow(id) {
				this.loadingDisa = true
				addCustomerFans({
					followerId: id
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						this.loadingDisa = false
						this.getDetail()
						uni.showToast({
							title: '关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			changeFollowStatus() {
				// console.log(item.isFavor, 'status')
				if (this.userInfo.isFavor == 1) {
					this.folModalShow = true
					this.nowFollowId = this.userInfo.customerId
				} else {
					// 关注
					this.addFollow(this.userInfo.customerId)
				}
			},
			openOverlay() {
				this.modalShow = true
			},
			deleteComm() {
				delComm({
					id: this.operateCommId,
					postId: this.detailId
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						this.closeModal()
						setTimeout(() => {
							this.getDetail()
						}, 2000)
					}
				})
			},
			deletePost() {
				delPost({
					id: this.detailId
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						setTimeout(() => {
							// uni.navigateTo({
							// 	url: `/pages/minePost/minePost`
							// })
							uni.navigateBack(0)
						}, 2000)
					}
				})
			},
			// 取消
			closeModal() {
				this.$refs.popup.close()
			},
			// 举报
			onReport() {
				this.closeModal()
				if (this.isPostOrComm) {
					uni.navigateTo({
						url: `/pages/userReport/userReport?id=${this.detailId}&Type=0`
					})
				} else {
					uni.navigateTo({
						url: `/pages/userReport/userReport?id=${this.operateCommId}&Type=1`
					})
				}
			},
			// 举报类型 1 评论
			onLongpress(item) {
				console.log(item.customerId);
				console.log(this.Info.id);
				if (item.customerId != this.Info.id) {
					// 不是本人
					this.isMySelf = false
				} else {
					this.isMySelf = true
				}
				this.operateCommId = item.id
				this.isPostOrComm = false
				this.$refs.popup.open()
				// this.postRemarkId = item.id // 评论id
				// this.userCustomerId = item.customerId //当前评论人的用户ID
				// this.reportType = 1 //举报类型 0 帖子 1评论
			},
			onLikeOrDisLike(type, state, id) {
				let params = {}
				if (type == '帖子') {
					params = {
						bizId: this.detailId,
						bizType: '0',
						liked: state == 0 || state == null ? true : false
					}
				} else if (type == '评论') {
					params = {
						bizId: id,
						bizType: '1',
						// liked: state == 0 ? true : false
						liked: state == 0 || state == null ? true : false
					}
				}
				console.log(params, 'paramsparams')
				addLike(params).then(res => {
					console.log(res);
					if (res.success) {
						this.getDetail()
					}
				})
			},
			// 发表评论
			onCommit(e) {
				// console.log(e,'eeeeeeeee')
				let params = {
					commentDescription: e,
					postId: this.detailId,
					// id:this.Info.id
				}
				addComment(params).then(res => {
					console.log(res);
					if (res.success) {
						this.commentContent = ''
						uni.showToast({
							title: '评论成功',
							duration: 2000
						});
						setTimeout(() => {
							this.getDetail() //获取详情
						}, 1000)
					}
				})

			},
			// 预览图图片
			onShowImg(item, index) {
				uni.previewImage({
					current: index,
					urls: item,
				})
			},
			// 废案
			viewImgs(url, type) {
				this.viewImg = url
				this.viewType = type
				this.viewShow = true
			},
			back() {
				uni.navigateBack(0)
			},
			openOperate() {
				this.isPostOrComm = true
				this.$refs.popup.open()
			},
			sectionChange(index) {
				this.curNow = index;
			},
			getDetail() {
				let params = {
					id: this.detailId
				}
				getPostDetail(params).then(res => {
					if (res.success) {
						console.log(res, 'ressss')
						res.result.forumThreadsVO.isFavor = res.result.isFavorite
						res.result.forumThreadsVO.isUses = res.result.isUse
						this.userInfo = res.result.forumThreadsVO
						this.commList = res.result.comments
						if (this.userInfo.customerId == this.Info.id) {
							this.isMySelf = true
						} else {
							this.isMySelf = false
						}
						console.log(this.userInfo.customerId, 'this.userInfo.customerId')
						console.log(this.Info.id, 'this.Info.id')
						console.log(this.isMySelf, 'this.isMySelf')


					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		// height: 100vh;
		// background-color: #FDE9BF; 
		// padding-bottom: 30rpx;
		// 导航
		.nav_wrap {
			position: fixed;
			background-color: #FFF;
			top: 0;
			z-index: 1;
			width: 100%;

			.new-head {
				width: 100%;
				display: flex;
				padding: 30rpx 0 38rpx 0;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				background-color: #FFF;

				.nav-title {
					width: 360rpx;
					height: 48rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #181127;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.nav_share {
					width: 44rpx;
					height: 44rpx;
					border-radius: 0px 0px 0px 0px;

					.HR_menu {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.userInfo {
			padding: 30rpx;
			border-bottom: 25rpx solid #F7F7F7;

			.topBox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.leftBox {
					display: flex;
					align-items: center;
					justify-content: flex-start;

					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 30rpx;

						image {
							width: 100%;
							height: 100%;
							display: block;
						}
					}

					.userName {
						color: #7E7E7E;
					}
				}

				.rightBox {
					.follow {
						font-size: 28rpx;
						padding: 5rpx 25rpx;
						border-radius: 30rpx;
						border: 1px solid $uni-text-color-red;
						color: $uni-text-color-red;
						margin-right: 20rpx;
					}

					.following {
						border: 1px solid #7c7c7c;
						color: #7c7c7c;
					}
				}
			}

			.contentTxt {
				letter-spacing: 4rpx;
				line-height: 45rpx;
				word-wrap: break-word;
				// white-space: pre-wrap;
				margin-bottom: 30rpx;
				color: #5A5A5A;
			}

			.imgs {
				margin-top: 30rpx;

				// display: flex;
				// align-items: center;
				// justify-content: flex-start;
				.imgsItem {
					// margin-right: 20rpx;
					width: 100%;
					// height: 600rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-bottom: 20rpx;

					image {
						width: 100%;
						// height: 100%;
						display: block;
					}
				}
			}

			// 视频
			.video_wrap {
				margin: 24rpx 0;
				text-align: center;

				.video-item {
					z-index: 1;
				}
			}

			.footBox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.dateTime {
					color: #BABABA;
					font-size: 28rpx;
				}

				.rightBox {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.favorite {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #BABABA;
						font-size: 28rpx;
						margin-right: 50rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							display: block;
							margin-right: 10rpx;
						}
					}

					.comment {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #BABABA;
						font-size: 28rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							display: block;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.commBox {
			padding: 30rpx;

			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.allComm {
					font-weight: bold;
					font-size: 30rpx;
				}

				.switch {
					width: 250rpx;

					::v-deep .u-subsection {
						border-radius: 80rpx !important;

						.u-subsection__bar {
							width: 120rpx !important;
							border-radius: 80rpx !important;
						}
					}
				}
			}

			.commList {
				margin-bottom: 250rpx;

				.commItem {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin: 35rpx 0 0 0;

					.left {
						width: 75rpx;
						height: 75rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-top: 10rpx;

						image {
							width: 100%;
							height: 100%;
							display: block;
						}
					}

					.right {
						width: calc(100% - 75rpx);
						// width: calc(100% - 95rpx);
						// margin-left: 20rpx;
						padding-left: 20rpx;
						padding-bottom: 35rpx;
						border-bottom: 1px solid #EBEBEB;

						.title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.name {
								font-size: 27rpx;
								color: #ADADAD;
							}

							.favor {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.num {
									margin-left: 5rpx;
									color: #C3C3C3;
								}

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

						.contentTxt {
							margin: 10rpx 0 20rpx 0;
							letter-spacing: 4rpx;
							line-height: 45rpx;
							// width: 100%;
							word-wrap: break-word;
						}

						.time {
							color: #ADADAD;
							font-size: 26rpx;
						}
					}
				}
			}

			.nullData {
				width: 100%;
				margin: 100rpx 0 230rpx 0;

				image {
					width: 28%;
					margin: 0 auto;
					display: block;
				}

				.txt {
					text-align: center;
					color: #8C8EA0;
					font-size: 30rpx;
					margin-top: 30rpx;
				}
			}
		}

		.speak {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 20rpx 30rpx 60rpx 30rpx;
			box-shadow: 0 0 10rpx 5rpx rgba(0, 0, 0, 0.1);
			background-color: #fff;

			::v-deep .u-input {
				background-color: #F7F7F7 !important;
				padding: 15rpx 25rpx !important;
				border-radius: 50rpx;

				// font-size: 80rpx !important;
				.u-input__content {
					// font-size: 80rpx !important;
				}
			}
		}

		.edit,
		.delete,
		.cancel {
			padding: 30rpx 0;
			text-align: center;
		}

		.edit {
			margin: 0 30rpx;
		}

		.delete {
			margin: 0 30rpx;
			border-bottom: 1rpx solid #D9D9D9;
			color: $uni-text-color-red;
		}

		.cancel {
			border-top: 12rpx solid #EDEDED;
		}

		.warp-lay {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.followConfirm {
				width: 70%;
				// height: 250rpx;
				padding: 45rpx 45rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;

				.txt {
					text-align: center;
					margin-bottom: 45rpx;
				}

				.btnGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.btn {
						padding: 18rpx 0rpx;
						border-radius: 35rpx;
						border: 0;
						font-size: 26rpx;
						width: 46%;
						text-align: center;
					}

					.cancel {
						background-color: #EDEDED;
						color: #4D4D4D;
					}

					.confirm {
						background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
						color: #fff;
					}
				}
			}
		}
	}
</style>
